<template>
  <div id="app">
    <z-form :model="forms" :rules="rules">
      <z-form-item label="用户名" prop="name">
        <z-input v-model="forms.name" name="name"></z-input>
      </z-form-item>
      <z-form-item label="年龄" prop="age">
        <z-input v-model="forms.age" name="age"></z-input>
      </z-form-item>
    </z-form>
  </div>
</template>

<script>
import zForm from "./components/Form";
import zFormItem from "./components/FormItem";
import zInput from "./components/Input";
 //props向下传递值，this.$emit('事件',传递的值)，父组件使用子组件props的值，直接拿到传递的值
export default {
  name: "app",
  components: {
    zForm,
    zFormItem,
    zInput
  },
  data() {
    return {
      forms: { name: "", age: "" },
      rules: {
        name: { required: true, message: "用户名不能为空" },
        age: { required: true, message: "年龄不能为空" }
      }
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
}
</style>
